<template>
    <div class="FoodMessageBG">
        <div class="FoodMessageTittle">
            <div>
                <el-input v-model="CheckMess" clearable :prefix-icon="Search" class="el_input" placeholder="请输入要查询的关键字">
                </el-input>
                <el-select class="el_select" v-model="selectValue" placeholder="请选择查询字段" size="large"
                    style="width: 240px">
                    <el-option v-for="(key, value) in checkDct" :key="key" :label="value" :value="key" />
                </el-select>
            </div>
            <el-button @click="getAllFoodMessage" type="primary" class="el_button_primary"
                :icon="RefreshRight">刷新</el-button>
        </div>
        <div class="FoodMessageBorder">
            <el-table @row-click="showOneMess" @sort-change="changeSort" class="FoodMessageTable el_table" stripe :data="sortData">
                <el-table-column sortable="custom" prop="traceNumber" align="center" label="溯源码" />
                <el-table-column sortable="custom" prop="name" align="center" label="食品名称" />
                <el-table-column sortable="custom" prop="quality" align="center" label="质检情况" />
                <el-table-column sortable="custom" prop="from" align="center" label="发货单位" />
                <el-table-column sortable="custom" prop="to" align="center" label="收货单位" />
            </el-table>
        </div>
        <el-dialog @close="closeDialog" class="FoodMessageDialog el_dialog" v-model="showOneDataFlag" align-center>
            <template #header>
                <p class="FoodMessageDialogTittle">溯源码:{{ showOneData.溯源码 }}的详细信息</p>
            </template>
            <el-timeline class="FoodMessageDialogTimeLine el_timeline">
                <el-timeline-item v-for="(item, index) in showOneData" :key="index">
                    <div class="FoodMessageDialogTimeLineBorder">
                        <p>{{ index }}:</p>
                        <p>{{ item }}</p>
                    </div>
                </el-timeline-item>
            </el-timeline>
        </el-dialog>
    </div>
</template>

<script setup lang='js' name=''>
import { Search, RefreshRight } from '@element-plus/icons-vue'
import getAllFoodMessageAPI from '@/api/main/FoodMessage/getAllFoodMessage';
import strToTime from '@/utils/strToTime';
import { computed, ref } from 'vue'
import showMessage from '@/utils/showMessage';
// 食品信息存放
const FoodData = ref([])
const ShowData = computed(() => {
    let vardata = ref(JSON.parse(JSON.stringify(FoodData.value)))
    vardata.value.forEach(element => {
        element["quality"] = element["quality"] == 1 ? "优质" : element["quality"] == 2 ? "合格" : "不合格"
        element["produce_time"] = strToTime(parseInt(element["produce_time"]))
        element["timestamp"] = strToTime(parseInt(element["timestamp"]), "Ciallo")
    });
    return vardata.value
})

const CheckMess = ref("")
const selectValue = ref("traceNumber")
const checkDct = ref({
    溯源码: "traceNumber",
    食品名称: "name",
    质检状况: "quality",
    发货单位: "from",
    收货单位: "to"
})

const CheckData = computed(() => {
    let vardata = ref([])
    ShowData.value.forEach(element => {
        if (element[selectValue.value] != undefined) {
            const goal = String(element[selectValue.value]);
            if (goal.includes(CheckMess.value)) {
                vardata.value.push(element)
            }
        }
    });
    return vardata.value
})


const sortRule = ref("")
const sortName = ref("")
// 源数据排序
const sortData = computed(() => {
    // console.log(CheckData.value.length)
    if (CheckData.value) {
        if (sortRule.value == 1) {
            return CheckData.value.toSorted((a, b) => {
                const valA = a[sortName.value] ?? '';
                const valB = b[sortName.value] ?? '';
                if (valA < valB) return -1;
                if (valA > valB) return 1;
                return 0;
            })
        } else if (sortRule.value == 2) {
            return CheckData.value.toSorted((a, b) => {
                const valA = a[sortName.value] ?? '';
                const valB = b[sortName.value] ?? '';
                if (valA < valB) return 1;
                if (valA > valB) return -1;
                return 0;
            })
        } else {
            return CheckData.value
        }
    } else { return null }
})
// 排序函数
function changeSort(e) {
    switch (e.order) {
        case "ascending": sortRule.value = 1; break;
        case "descending": sortRule.value = 2; break;
        default: sortRule.value = null; break;
    }
    if (e.order) {
        sortName.value = e.prop
    } else {
        sortName.value = null
    }
}
// 获取所有食品信息
async function getAllFoodMessage() {
    showMessage("正在加载中......","success")
    FoodData.value = []
    const res = await getAllFoodMessageAPI()
    // console.log(res.data)
    FoodData.value = res.data
    showMessage("加载成功","success")
}
getAllFoodMessage()

const showOneData = ref({
    溯源码: "暂无信息",
    食品名称: "暂无信息",
    生产时间: "暂无信息",
    上架时间: "暂无信息",
    质检状况: "暂无信息",
    发货单位: "暂无信息",
    发货单位地址: "暂无信息",
    收货单位: "暂无信息",
    收货单位地址: "暂无信息"

})
const showOneDataFlag = ref(false)
// 展示单个食品信息
function showOneMess(e) {
    showOneData.value.溯源码 = e.traceNumber ? e.traceNumber : "暂无信息"
    showOneData.value.食品名称 = e.name ? e.name : "暂无信息"
    showOneData.value.生产时间 = e.produce_time ? e.produce_time : "暂无信息"
    showOneData.value.上架时间 = e.timestamp ? e.timestamp : "暂无信息"
    showOneData.value.质检状况 = e.quality ? e.quality : "暂无信息"
    showOneData.value.发货单位 = e.from ? e.from : "暂无信息"
    showOneData.value.发货单位地址 = e.from_address ? e.from_address : "暂无信息"
    showOneData.value.收货单位 = e.to ? e.to : "暂无信息"
    showOneData.value.收货单位地址 = e.to_address ? e.to_address : "暂无信息"
    showOneDataFlag.value = true
}
function closeDialog() {
    showOneData.value.溯源码 = "暂无信息"
    showOneData.value.食品名称 = "暂无信息"
    showOneData.value.生产时间 = "暂无信息"
    showOneData.value.上架时间 = "暂无信息"
    showOneData.value.质检状况 = "暂无信息"
    showOneData.value.发货单位 = "暂无信息"
    showOneData.value.发货单位地址 = "暂无信息"
    showOneData.value.收货单位 = "暂无信息"
    showOneData.value.收货单位地址 = "暂无信息"
    showOneDataFlag.value = false
}


</script>

<style scoped>
/* 框架 */
.FoodMessageBG {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* 标题 */
.FoodMessageTittle {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 50px;
}

.FoodMessageTittle>*:nth-child(1) {
    display: flex;
    gap: 10px;
    flex-direction: row;
}

/* 内容框 */
.FoodMessageBorder {
    flex: 1;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* 表格 */
.FoodMessageTable {
    position: absolute;
    height: 100%;
}

/* dialog */
.FoodMessageDialogTittle {
    transition: all 0.5s;
    font-size: 20px;
    text-align: center;
    color: var(--PfoodMessage_Tittle);
    font-weight: bold;
}

.FoodMessageDialogTimeLine {
    margin-top: 20px;
}

.FoodMessageDialogTimeLineBorder {
    width: 320px;
    display: flex;
    align-items: center;
    font-size: 16px;
    gap: 20px;
    margin-left: 20px;
}

.FoodMessageDialogTimeLineBorder>*:nth-child(1) {
    flex: 1;
    text-align: center;
}

.FoodMessageDialogTimeLineBorder>*:nth-child(2) {
    flex: 2;
    text-align: center;
    word-break: break-all;
}
</style>
<style>
.FoodMessageDialog {
    width: 400px !important;
    overflow: hidden;
}
</style>